<!DOCTYPE html>
<html>
<head>
  <title>Demo: Object</title>
  <link rel="stylesheet" href="demo.css"/>
  <script type="text/javascript" src="../compile/unminified/svg-morpheus.js"></script>
  <script type="text/javascript" src="demo.js"></script>
</head>
<body>
  <div id="heading">
    <h1>SVG Morpheus</h1>
    <h2>Demo: Inline SVG</h2>
  </div>
  <!-- The icon set is based on Material Design icons by Google (https://github.com/google/material-design-icons) -->
  <svg id="icon" viewBox="0 0 48 48" style="background-color:#ffffff00" version="1.1"
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
  >
    <g id="3d_rotation" style="display:none">
      <path d="M 15 43 C 8.5 39.9 3.8 33.5 3.1 26 L 0.1 26 C 1.1 38.3 11.4 48 24 48 C 24.4 48 24.9 48 25.3 47.9 L 17.7 40.3 L 15 43 L 15 43 Z" fill="#336699"/>
      <path d="M 32 26 C 32 27.1 31.1 28 30 28 L 28 28 L 28 20 L 30 20 C 31.1 20 32 20.9 32 22 L 32 26 M 30 16 L 24 16 L 24 32 L 30 32 C 33.3 32 36 29.3 36 26 L 36 22 C 36 18.7 33.3 16 30 16 L 30 16 Z" fill="#336699"/>
      <path d="M 22 28 L 22 26 C 22 24.9 21.1 24 20 24 C 21.1 24 22 23.1 22 22 L 22 20 C 22 17.8 20.2 16 18 16 L 12 16 L 12 20 L 18 20 L 18 22 L 14 22 L 14 26 L 18 26 L 18 27.9 L 18 28 L 18 28 L 18 28 L 18 28 L 12 28 L 12 32 L 18 32 C 20.2 32 22 30.2 22 28 L 22 28 Z" fill="#336699"/>
      <path d="M 24 0 C 23.6 0 23.1 0 22.7 0.1 L 30.3 7.7 L 33 5 C 39.5 8.1 44.2 14.4 44.9 22 L 47.9 22 C 46.9 9.7 36.6 0 24 0 L 24 0 Z" fill="#336699"/>
    </g>
    <g id="accessibility" style="display:none">
      <path d="M 42 18 L 30 18 L 30 44 L 26 44 L 26 32 L 22 32 L 22 44 L 18 44 L 18 18 L 6 18 L 6 14 L 42 14 L 42 18 Z" fill="#336699"/>
      <path d="M 24 4 C 26.2 4 28 5.8 28 8 C 28 10.2 26.2 12 24 12 C 21.8 12 20 10.2 20 8 C 20 5.8 21.8 4 24 4 Z" fill="#336699"/>
    </g>
    <g id="account_balance" style="display:none">
      <path d="M 4 44 L 42 44 L 42 38 L 4 38 L 4 44 L 4 44 Z" fill="#336699"/>
      <path d="M 32 20 L 32 34 L 38 34 L 38 20 L 32 20 L 32 20 Z" fill="#336699"/>
      <path d="M 20 20 L 20 34 L 26 34 L 26 20 L 20 20 L 20 20 Z" fill="#336699"/>
      <path d="M 8 20 L 8 34 L 14 34 L 14 20 L 8 20 L 8 20 Z" fill="#336699"/>
      <path d="M 23 2 L 4 12 L 4 16 L 42 16 L 42 12 L 23 2 L 23 2 Z" fill="#336699"/>
    </g>
    <g id="account_box" style="display:none">
      <path d="M 6 10 L 6 38 C 6 40.2 7.8 42 10 42 L 38 42 C 40.2 42 42 40.2 42 38 L 42 10 C 42 7.8 40.2 6 38 6 L 10 6 C 7.8 6 6 7.8 6 10 L 6 10 Z" fill="#336699"/>
      <path d="M 30 18 C 30 21.3 27.3 24 24 24 C 20.7 24 18 21.3 18 18 C 18 14.7 20.7 12 24 12 C 27.3 12 30 14.7 30 18 L 30 18 Z" fill="#FFF"/>
      <path d="M 12 34 C 12 30 20 27.8 24 27.8 C 28 27.8 36 30 36 34 L 36 36 L 12 36 L 12 34 L 12 34 Z" fill="#FFF"/>
    </g>
    <g id="account_circle" style="display:none">
      <path d="M 24 4 C 13 4 4 13 4 24 C 4 35 13 44 24 44 C 35 44 44 35 44 24 C 44 13 35 4 24 4 L 24 4 Z" fill="#336699"/>
      <path d="M 24 10 C 27.3 10 30 12.7 30 16 C 30 19.3 27.3 22 24 22 C 20.7 22 18 19.3 18 16 C 18 12.7 20.7 10 24 10 L 24 10 Z" fill="#FFF"/>
      <path d="M 24 38.4 C 19 38.4 14.6 35.8 12 32 C 12.1 28 20 25.8 24 25.8 C 28 25.8 35.9 28 36 32 C 33.4 35.8 29 38.4 24 38.4 L 24 38.4 Z" fill="#FFF"/>
    </g>
    <g id="add_shopping_cart" style="display:none">
      <path d="M 14.3 29.5 C 14.3 29.4 14.3 29.3 14.4 29.3 L 16.2 26 L 31.1 26 C 32.6 26 33.9 25.2 34.6 23.9 L 42.3 9.9 L 38.8 8 L 38.8 8 L 36.6 12 L 31.1 22 L 17.1 22 L 16.8 21.5 L 12.3 12 L 10.4 8 L 8.5 4 L 2 4 L 2 8 L 6 8 L 13.2 23.2 L 10.5 28.1 C 10.2 28.6 10 29.3 10 30 C 10 32.2 11.8 34 14 34 L 38 34 L 38 30 L 14.8 30 C 14.6 30 14.3 29.8 14.3 29.5 L 14.3 29.5 Z" fill="#336699"/>
      <path d="M 22 18 L 26 18 L 26 12 L 32 12 L 32 8 L 26 8 L 26 2 L 22 2 L 22 8 L 16 8 L 16 12 L 22 12 L 22 18 L 22 18 Z" fill="#336699"/>
      <path d="M 34 36 C 31.8 36 30 37.8 30 40 C 30 42.2 31.8 44 34 44 C 36.2 44 38 42.2 38 40 C 38 37.8 36.2 36 34 36 L 34 36 Z" fill="#336699"/>
      <path d="M 14 36 C 11.8 36 10 37.8 10 40 C 10 42.2 11.8 44 14 44 C 16.2 44 18 42.2 18 40 C 18 37.8 16.2 36 14 36 L 14 36 Z" fill="#336699"/>
    </g>
    <g id="android" style="display:none">
      <path d="M 12 36 C 12 37.1 12.9 38 14 38 L 16 38 L 16 45 C 16 46.7 17.3 48 19 48 C 20.7 48 22 46.7 22 45 L 22 38 L 26 38 L 26 45 C 26 46.7 27.3 48 29 48 C 30.7 48 32 46.7 32 45 L 32 38 L 34 38 C 35.1 38 36 37.1 36 36 L 36 16 L 12 16 L 12 36 L 12 36 Z" fill="#336699"/>
      <path d="M 31.1 4.3 L 33.7 1.7 C 34.1 1.3 34.1 0.7 33.7 0.3 C 33.3 -0.1 32.7 -0.1 32.3 0.3 L 29.3 3.3 C 27.7 2.5 25.9 2 24 2 C 22.1 2 20.3 2.5 18.7 3.3 L 15.7 0.3 C 15.3 -0.1 14.7 -0.1 14.3 0.3 C 13.9 0.7 13.9 1.3 14.3 1.7 L 16.9 4.3 C 13.9 6.5 12 10 12 14 L 36 14 C 36 10 34.1 6.5 31.1 4.3 L 31.1 4.3 ZM 30 10 L 28 10 L 28 8 L 30 8 L 30 10 L 30 10 ZM 20 10 L 18 10 L 18 8 L 20 8 L 20 10 L 20 10 Z" fill="#336699"/>
      <path d="M 41 16 C 39.3 16 38 17.3 38 19 L 38 33 C 38 34.7 39.3 36 41 36 C 42.7 36 44 34.7 44 33 L 44 19 C 44 17.3 42.7 16 41 16 L 41 16 Z" fill="#336699"/>
      <path d="M 7 16 C 5.3 16 4 17.3 4 19 L 4 33 C 4 34.7 5.3 36 7 36 C 8.7 36 10 34.7 10 33 L 10 19 C 10 17.3 8.7 16 7 16 L 7 16 Z" fill="#336699"/>
    </g>
    <g id="backup" style="display:none">
      <path d="M38.7,20.1C37.3,13.2,31.3,8,24,8c-5.8,0-10.8,3.3-13.3,8.1C4.7,16.7,0,21.8,0,28c0,6.6,5.4,12,12,12h26c5.5,0,10-4.5,10-10C48,24.7,43.9,20.4,38.7,20.1z" fill="#336699"/>
      <path d="M28,26v8h-8v-8h-6l10-10l10,10H28z" fill="#FFF"/>
    </g>
    <g id="bookmark" style="display:none">
      <path d="M34,6H14c-2.2,0-4,1.8-4,4l0,32l14-6l14,6V10C38,7.8,36.2,6,34,6z" fill="#336699"/>
    </g>
    <g id="bug_report" style="display:none">
      <path d="M40,16h-5.6c-0.9-1.6-2.1-2.9-3.6-3.9L34,8.8L31.2,6l-4.3,4.3C25.9,10.1,25,10,24,10s-1.9,0.1-2.8,0.3L16.8,6L14,8.8
        l3.2,3.3c-1.5,1-2.7,2.4-3.6,3.9H8v4h4.2c-0.1,0.7-0.2,1.3-0.2,2v2H8v4h4v2c0,0.7,0.1,1.3,0.2,2H8v4h5.6c2.1,3.6,5.9,6,10.4,6
        s8.3-2.4,10.4-6H40v-4h-4.2c0.1-0.7,0.2-1.3,0.2-2v-2h4v-4h-4v-2c0-0.7-0.1-1.3-0.2-2H40V16z" fill="#336699"/>
      <path d="M28,32h-8v-4h8V32z" fill="#FFF"/>
      <path d="M28,24h-8v-4h8V24z" fill="#FFF"/>
    </g>
    <g id="credit_card" style="display:none">
      <path d="M40,8H8c-2.2,0-4,1.8-4,4v24c0,2.2,1.8,4,4,4h32c2.2,0,4-1.8,4-4V12C44,9.8,42.2,8,40,8z" fill="#336699"/>
      <path d="M40,36H8V24h32V36z" fill="#FFF"/>
      <path d="M40,16H8v-4h32V16z" fill="#FFF"/>
    </g>
    <g id="delete" style="display:none">
      <path d="M12,38c0,2.2,1.8,4,4,4h16c2.2,0,4-1.8,4-4V14H12V38z" fill="#336699"/>
      <path d="M38,8h-7l-2-2H19l-2,2h-7v4h28V8z" fill="#336699"/>
    </g>
    <g id="done" style="display:none">
      <polygon points="18,32.3 9.7,24 6.8,26.8 18,38 42,14 39.2,11.2" fill="#336699"/>
    </g>
    <g id="drawer" style="display:none">
      <path d="M24,16c2.2,0,4-1.8,4-4s-1.8-4-4-4c-2.2,0-4,1.8-4,4S21.8,16,24,16z" fill="#336699"/>
      <path d="M24,20c-2.2,0-4,1.8-4,4s1.8,4,4,4c2.2,0,4-1.8,4-4S26.2,20,24,20z" fill="#336699"/>
      <path d="M24,32c-2.2,0-4,1.8-4,4s1.8,4,4,4c2.2,0,4-1.8,4-4S26.2,32,24,32z" fill="#336699"/>
    </g>
    <g id="event" style="display:none">
      <path d="M32,2v4H16V2h-4v4h-2c-2.2,0-4,1.8-4,4l0,28c0,2.2,1.8,4,4,4h28c2.2,0,4-1.8,4-4V10c0-2.2-1.8-4-4-4
          h-2V2H32z" fill="#336699"/>
      <path d="M38,38H10V16h28V38z" fill="#FFF"/>
      <path d="M34,24H24v10h10V24z" fill="#336699"/>
    </g>
    <g id="exit_to_app" style="display:none">
      <path d="M20.2,31.2L23,34l10-10L23,14l-2.8,2.8l5.2,5.2H6v4h19.3L20.2,31.2z" fill="#336699"/>
      <path d="M38,6H10c-2.2,0-4,1.8-4,4v8h4v-8h28v28H10v-8H6v8c0,2.2,1.8,4,4,4h28c2.2,0,4-1.8,4-4V10C42,7.8,40.2,6,38,6z" fill="#336699"/>
    </g>
    <g id="explore" style="display:none">
      <path d="M24,4C13,4,4,13,4,24c0,11,9,20,20,20c11,0,20-9,20-20C44,13,35,4,24,4z" fill="#336699"/>
      <path d="M28.4,28.4L12,36l7.6-16.4L36,12L28.4,28.4z" fill="#FFF"/>
      <path d="M24,21.8c-1.2,0-2.2,1-2.2,2.2s1,2.2,2.2,2.2c1.2,0,2.2-1,2.2-2.2S25.2,21.8,24,21.8z" fill="#336699"/>
    </g>
    <g id="extension" style="display:none">
      <path d="M41,22h-3v-8c0-2.2-1.8-4-4-4h-8V7c0-2.8-2.2-5-5-5c-2.8,0-5,2.2-5,5v3H8c-2.2,0-4,1.8-4,4l0,7.6h3c3,0,5.4,2.4,5.4,5.4
        S10,32.4,7,32.4H4L4,40c0,2.2,1.8,4,4,4h7.6v-3c0-3,2.4-5.4,5.4-5.4c3,0,5.4,2.4,5.4,5.4v3H34c2.2,0,4-1.8,4-4v-8h3
        c2.8,0,5-2.2,5-5S43.8,22,41,22z" fill="#336699"/>
    </g>
    <g id="favorite" style="display:none">
      <path d="M24,42.7l-2.9-2.6C10.8,30.7,4,24.6,4,17C4,10.8,8.8,6,15,6c3.5,0,6.8,1.6,9,4.2C26.2,7.6,29.5,6,33,6
          c6.2,0,11,4.8,11,11c0,7.6-6.8,13.7-17.1,23.1L24,42.7z" fill="#336699"/>
    </g>
    <g id="help" style="display:none">
      <path d="M24,4C13,4,4,13,4,24s9,20,20,20c11,0,20-9,20-20S35,4,24,4z" fill="#336699"/>
      <path d="M26,38h-4v-4h4V38z" fill="#FFF"/>
      <path d="M30.1,22.5l-1.8,1.8C26.9,25.8,26,27,26,30h-4v-1c0-2.2,0.9-4.2,2.3-5.7l2.5-2.5c0.7-0.7,1.2-1.7,1.2-2.8c0-2.2-1.8-4-4-4s-4,1.8-4,4h-4c0-4.4,3.6-8,8-8c4.4,0,8,3.6,8,8C32,19.8,31.3,21.4,30.1,22.5z" fill="#FFF"/>
    </g>
    <g id="history" style="display:none">
      <path d="M25,4c-7.1,0-13.2,3.8-16.4,9.5L4,9v13h13l-5.5-5.5C13.9,11.5,19,8,25,8c8.3,0,15,6.7,15,15
        c0,8.3-6.7,15-15,15c-6.5,0-12.1-4.2-14.1-10H6.7c2.2,8.1,9.5,14,18.3,14c10.5,0,19-8.5,19-19S35.5,4,25,4z" fill="#336699"/>
      <path d="M22,14v10.2l9.4,5.6
        l1.5-2.6l-8-4.7V14H22z" fill="#336699"/>
    </g>
    <g id="home" style="display:none">
      <polygon points="20,40 20,28 28,28 28,40 38,40 38,24 44,24 24,6 4,24 10,24 10,40" fill="#336699"/>
    </g>
    <g id="https" style="display:none">
      <path d="M36,16h-2v-4c0-5.5-4.5-10-10-10c-5.5,0-10,4.5-10,10v4h-2c-2.2,0-4,1.8-4,4v20c0,2.2,1.8,4,4,4h24c2.2,0,4-1.8,4-4V20
            C40,17.8,38.2,16,36,16z" fill="#336699"/>
      <path d="M24,34c-2.2,0-4-1.8-4-4s1.8-4,4-4c2.2,0,4,1.8,4,4S26.2,34,24,34z" fill="#FFF"/>
      <path d="M30.2,16H17.8v-4c0-3.4,2.8-6.2,6.2-6.2c3.4,0,6.2,2.8,6.2,6.2V16z" fill="#FFF"/>
    </g>
    <g id="info" style="display:none">
      <path d="M24,4C13,4,4,13,4,24s9,20,20,20c11,0,20-9,20-20S35,4,24,4z" fill="#336699"/>
      <path d="M26,34h-4V22h4V34z" fill="#FFF"/>
      <path d="M26,18h-4v-4h4V18z" fill="#FFF"/>
    </g>
    <g id="input" style="display:none">
      <path d="M42,6H6c-2.2,0-4,1.8-4,4v8h4v-8h36V38H6v-8H2v8c0,2.2,1.8,4,4,4h36c2.2,0,4-1.8,4-4V10C46,7.8,44.2,6,42,6z" fill="#336699"/>
      <path d="M22,32l8-8
        l-8-8v6H2v4h20V32z" fill="#336699"/>
    </g>
    <g id="invert_colors" style="display:none">
      <path d="M35.3,15.9L24,4.5l0,0v0L12.7,15.9c-6.2,6.2-6.2,16.4,0,22.6c3.1,3.1,7.2,4.7,11.3,4.7s8.2-1.6,11.3-4.7
        C41.6,32.2,41.6,22.1,35.3,15.9z" fill="#336699"/>
      <path d="M24,39.2L24,39.2c-3.2,0-6.2-1.2-8.5-3.5c-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2,3.5-8.5l8.5-8.5
        L24,39.2z" fill="#FFF"/>
    </g>
    <g id="label" style="display:none">
      <path d="M35.3,11.7c-0.7-1-1.9-1.7-3.3-1.7l-22,0c-2.2,0-4,1.8-4,4v20c0,2.2,1.8,4,4,4l22,0c1.3,0,2.5-0.7,3.3-1.7L44,24
        L35.3,11.7z" fill="#336699"/>
    </g>
    <g id="language" style="display:none">
      <path d="M24,4C12.9,4,4,13,4,24s8.9,20,20,20c11.1,0,20-9,20-20S35,4,24,4z" fill="#336699"/>
      <path d="M37.8,16h-5.9c-0.6-2.5-1.6-4.9-2.8-7.1C32.9,10.1,35.9,12.7,37.8,16z" fill="#FFF"/>
      <path d="M24,8.1c1.7,2.4,3,5.1,3.8,7.9h-7.6C21,13.1,22.3,10.5,24,8.1z" fill="#FFF"/>
      <path d="M8.5,28C8.2,26.7,8,25.4,8,24s0.2-2.7,0.5-4h6.8c-0.2,1.3-0.3,2.6-0.3,4s0.1,2.7,0.3,4H8.5z" fill="#FFF"/>
      <path d="M10.2,32h5.9c0.6,2.5,1.6,4.9,2.8,7.1C15.1,37.9,12.1,35.3,10.2,32z" fill="#FFF"/>
      <path d="M16.1,16h-5.9c1.9-3.3,5-5.9,8.7-7.1C17.6,11.1,16.7,13.5,16.1,16z" fill="#FFF"/>
      <path d="M24,39.9c-1.7-2.4-3-5.1-3.8-7.9h7.6C27,34.9,25.7,37.5,24,39.9z" fill="#FFF"/>
      <path d="M28.7,28h-9.4c-0.2-1.3-0.3-2.6-0.3-4s0.1-2.7,0.3-4h9.4c0.2,1.3,0.3,2.6,0.3,4S28.9,26.7,28.7,28z" fill="#FFF"/>
      <path d="M29.2,39.1c1.2-2.2,2.1-4.6,2.8-7.1h5.9C35.9,35.3,32.9,37.9,29.2,39.1z" fill="#FFF"/>
      <path d="M32.7,28c0.2-1.3,0.3-2.6,0.3-4s-0.1-2.7-0.3-4h6.8c0.3,1.3,0.5,2.6,0.5,4s-0.2,2.7-0.5,4H32.7z" fill="#FFF"/>
    </g>
    <g id="launch" style="display:none">
      <path d="M38,38H10V10h14V6H10c-2.2,0-4,1.8-4,4v28c0,2.2,1.8,4,4,4h28c2.2,0,4-1.8,4-4V24h-4V38z" fill="#336699"/>
      <path d="M28,6v4h7.2L15.5,29.7l2.8,2.8L38,12.8V20h4V6H28z" fill="#336699"/>
    </g>
    <g id="loyalty" style="display:none">
      <path d="M42.8,23.2l-18-18C24.1,4.4,23.1,4,22,4H8C5.8,4,4,5.8,4,8v14c0,1.1,0.4,2.1,1.2,2.8l18,18c0.7,0.7,1.7,1.2,2.8,1.2
        c1.1,0,2.1-0.4,2.8-1.2l14-14c0.7-0.7,1.2-1.7,1.2-2.8C44,24.9,43.5,23.9,42.8,23.2z" fill="#336699"/>
      <path d="M11,14c-1.7,0-3-1.3-3-3s1.3-3,3-3s3,1.3,3,3S12.7,14,11,14z" fill="#FFF"/>
      <path d="M34.5,30.5L26,39.1l-8.5-8.5l0,0C16.6,29.6,16,28.4,16,27c0-2.8,2.2-5,5-5c1.4,0,2.6,0.6,3.5,1.5l1.5,1.5l1.5-1.5c0.9-0.9,2.2-1.5,3.5-1.5c2.8,0,5,2.2,5,5C36,28.4,35.4,29.6,34.5,30.5L34.5,30.5z" fill="#FFF"/>
    </g>
    <g id="polymer" style="display:none">
      <polygon points="38,8 30,8 14.2,33.3 9,24 18,8 10,8 1,24 10,40 18,40 33.8,14.7 39,24 30,40 38,40 47,24" fill="#336699"/>
    </g>
    <g id="print" style="display:none">
      <path d="M38,16H10c-3.3,0-6,2.7-6,6v12h8v8h24v-8h8V22C44,18.7,41.3,16,38,16z" fill="#336699"/>
      <path d="M32,38H16V28h16V38z" fill="#FFF"/>
      <path d="M38,24c-1.1,0-2-0.9-2-2s0.9-2,2-2c1.1,0,2,0.9,2,2S39.1,24,38,24z" fill="#FFF"/>
      <path d="M36,6H12v8h24V6z" fill="#336699"/>
    </g>
    <g id="receipt" style="display:none">
      <path d="M6,44l3-3l3,3l3-3l3,3l3-3l3,3l3-3l3,3l3-3l3,3l3-3l3,3V4l-3,3l-3-3l-3,3l-3-3l-3,3l-3-3l-3,3l-3-3l-3,3l-3-3L9,7L6,4V44z" fill="#336699"/>
      <path d="M36,34H12v-4h24V34z" fill="#FFF"/>
      <path d="M36,26H12v-4h24V26z" fill="#FFF"/>
      <path d="M36,18H12v-4h24V18z" fill="#FFF"/>
    </g>
  </svg>
  <div id="options">
    <div class="option">
      <label for="selIcon">Icon:</label>
      <select id="selIcon"></select>
    </div>
    <div class="option">
      <label for="selEasing">Easing:</label>
      <select id="selEasing"></select>
    </div>
    <div class="option">
      <label for="selDuration">Duration:</label>
      <select id="selDuration"></select>
    </div>
    <div class="option">
      <label for="selRotation">Rotation:</label>
      <select id="selRotation"></select>
    </div>
  </div>
</body>
</html>